<!--vue的template的最外层如果出现了div，只能是一个，不能并行-->
<!--主体部分el-main，也是子路由更换的部分-->
<template>
<div>
          <el-table
            :data= "tableData"
            border
            stripe
            header-cell-class-name= "headerBg"
            @selection-change ="batchDelete">
            <el-table-column prop= "id" label= "ID" width= "80"> </el-table-column>
            <el-table-column prop= "teacherName" label= "教师姓名" width= "170">
            </el-table-column>
            <el-table-column prop= "nickName" label= "昵称" width= "170">
            </el-table-column>
            <el-table-column prop= "email" label= "邮箱" width= "170">
            </el-table-column>
            <el-table-column prop= "role" label= "角色" width= "80">
            </el-table-column>
            <el-table-column prop= "createTime" label= "创建时间" width= "170">
            </el-table-column>
            <el-table-column prop= "updateTime" label= "更新时间" width= "170">
            </el-table-column>
            <el-table-column label= "操作">
              <template slot-scope= "scope"><!--slot-scope= "scope"--><!--vscode说定义了但没用，报错却不影响运行，IDEA不报错-->
                <el-button type= "warning" @click= "editHandler(scope.row)">
                  编辑<i class= "el-icon-edit-outline"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style= "padding: 10px 0">
            <!--分页-->
            <el-pagination
              @size-change= "handleSizeChange"
              @current-change= "handleCurrentChange"
              :current-page= "pageNum"
              :page-sizes= "[5, 10, 15, 20]"
              :page-size= "pageSize"
              layout= "total, sizes, prev, pager, next, jumper"
              :total= "total"
            >
            </el-pagination>
          </div>
      <el-dialog title= "教师信息" :visible.sync= "dialogFormVisible" width= "30%">
          <el-form>
            <el-form-item label= "教师姓名">
              <el-input v-model= "form.teacherName" 
              autocomplete= "off" 
              aria-required= "true"></el-input>
            </el-form-item>
            <el-form-item label= "教师昵称">
              <el-input
                v-model= "form.nickName"
                autocomplete= "off"
                aria-required= "true"
              ></el-input>
            </el-form-item>
            <el-form-item label= "教师邮箱">
              <el-input
                v-model= "form.email"
                autocomplete= "off"
                aria-required= "true"
              ></el-input>
            </el-form-item>
            <el-form-item label= "角色">
              <el-select clearable v-model = "form.role" placeholder="请选择角色" style= "width:100%">
                  <el-option v-for= "item in roles" :key = "item.roleName" :lable= "item.roleName" :value = "item.identity"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot= "footer" class= "dialog-footer">
            <el-button @click= "dialogFormVisible = false"> 取 消</el-button>
            <el-button type= "primary" @click= "save"> 确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title= "提示" :visible.sync= "dialogVisible" width= "30%">
          <span>这是一段信息</span>
          <span slot= "footer" class= "dialog-footer">
            <el-button @click= "dialogVisible = false">取 消</el-button>
            <el-button type= "primary" @click= "dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>  
        <div style="text-align:center;width:70%;margin:100px 200px">
        <p style="margin:0px 200px"> 本系统含有固定组件功能和定制组件功能，其中固定组件为班级授课信息侧边栏，包含学生管理和成绩管理两个功能；
        定制组件为定制功能侧边栏，包含试卷课件管理和考勤两个功能。</p>
        <br>
        TEACHER_FIRST:  无定制功能,仅有固定组件<br><br>
        TEACHER_SECOND: 有考勤，无试卷课件管理<br><br>
        TEACHER_THIRD:  有试卷课件管理，无考勤<br><br>
        TEACHER_FORTH:  考勤和试卷课件管理均有
        </div>  
</div>
</template>
<script>
export default {
  name: "Teacher",
  data() {
    return {
      //模糊分页查询
      tableData: [], //删除王小虎的假数据，表格数据默认空数组
      total: 0, //总条数
      pageNum: 1, //第几页
      pageSize: 6, //每页几条数据
      teacherName:'',  
      nickName: "",
      email: "",
      role:'',
      roles:[],
      createTime: "",
      updateTime: "",
      //Dialog对话框
      dialogFormVisible: false,
      //多选框
      form: {},
      multipleSelection: [],
      //表格样式
      headBg: "headBg",
      dialogVisible: false,
      localTeacher:localStorage.getItem('teacher') ? JSON.parse(localStorage.getItem("teacher")):{},
    };
  },
  created() {
    this.load();


  },
  methods: {
    /*分页功能实现，与后端数据联动 */
    //MyBatis使用fetch方法自己将前后端连接起来（跨域问题的解决方法之一是在后端配置CoresConfig类开放后端端口），

    load() {
      //MyBatis-plus的时候我们使用axios将前后端数据联动
      //先安装axios，然后直接用就行
      this.request
        .get("http://localhost:8081/teacher/page", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            teacherName: this.localTeacher.teacherName,
            nickName: this.nickName,
            email: this.email,
            createTime: this.createTime,
            updateTime: this.updateTime,
          },
        })
        .then((res) => {
          console.log(res);

          this.tableData = res.data.records;
          this.total = res.data.total;
        });
        this.request
        .get("http://localhost:8081/role")
        .then((res) => {
                      let data = res.data
            let result = data.filter((data)=>{
                return data.roleId!=1&&data.roleId!=7&&data.roleId!=6
            })
          this.roles = result
        });
    },
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum);
      this.pageNum = pageNum;
      this.load();
    },
    //模糊查询重置按钮方法
    clear() {
      this.teacherName = "";
      this.nickName = "";
      this.email = "";
      this.load();
    },

    //(和对话框一起使用，点击按钮触发对话框，填写信息之后确定按钮进行最终操作)
    //编辑按钮实现
    editHandler(row) {
      //先将row的数据赋值给form，然后打开弹窗
      this.form = row;
      this.dialogFormVisible = true;
    },
    addHandler() {
      this.dialogFormVisible = true;
      this.form = {};
    },
    //后续操作（确定/取消按钮--->保存表单信息，删除表单信息，导入记录，导出记录）

    save() {
      //插入或者更新，后端写在了一起，所以这里也可以写在一起
      this.request
        .post("http://localhost:8081/teacher/", this.form)
        .then((res) => {
          if (res.flag=='200') {
            this.$message.success("用户角色赋予成功，定制完成！请点击右上角退出后重新登录方可使用！");
            this.dialogFormVisible = false;
            this.load();
          } else {
            this.$message.error(res.msg);
            this.dialogFormVisible = false;
          }
        });
    },
    //批量删除+普通单个删除
    batchDelete(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    batchDeleteHandler() {
      let ids = this.multipleSelection.map((v) => v.id); //将对象数组转化为id数组

      this.request
        .post("/teacher/batchDelete", ids)
        // .then((ids) => {
        //   if (ids == []) {
        //     this.$message.error("请先勾选要批量删除的记录!");
        //   }
        // })
        .then((res) => {
          if (res.flag == '200') {
            this.$message.success(res.msg);
            this.load();
          } else {
            this.$message.error(res.msg);
            this.dialogFormVisible = false;
          }
        });
    },

    deleteHandler(id) {
      this.request.delete("/teacher/" + id).then((res) => {
        if (res.flag == '200') {
          this.$message.success(res.msg);
          this.load();
        } else {
          this.$message.error(res.msg);
          this.dialogFormVisible = false;
        }
      });
    },
  },
};
</script>
<style>
.headerBg {
  background: #eee !important;
}
</style>